<template>
    <div>
      <div id="map" class="map-display"></div>
    </div>
  </template>
  
  <script>
    import Map from 'ol/Map';
    import View from 'ol/View';
    import TileLayer from 'ol/layer/Tile';
    import { TileSuperMapRest } from '@supermap/iclient-ol';

    export default {
        name: '',
        props: {
        //msg: String
        },
        methods:{
            initMap(){
                var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
                var map = new Map({
                  target: 'map',
                  view: new View({
                      center: [0, 0],
                      zoom: 2,
                      projection: 'EPSG:4326'
                  })
                });
                var layer = new TileLayer({
                    source: new TileSuperMapRest({
                        url: url,
                        wrapX: true
                    }),
                    projection: 'EPSG:4326'
                });
                map.addLayer(layer);
                },
        },
        created(){

        },
        mounted(){
            this.initMap();
        }
    }
  </script> 
  
<style>

.map-display {
    position: absolute;
    width: 100%;
    height:100%;
    background-color: darkgray;
}

</style>